
const addNewTasksContainer = document.querySelector(".addAnotherTasks"),
    addNewTasksBtn = document.querySelector(".addAnotherTasksBtn");
    

addNewTasksBtn.addEventListener("click", () => {
    const confirmAddTasksEl = document.createElement("div"),
        submithBtn = document.querySelector(".addAnotherTasksUrl");
    addNewTasksBtn.classList.add("hidden");

    confirmAddTasksEl.classList.add('confirmAddTasks');

    confirmAddTasksEl.style.width = '20rem';
    confirmAddTasksEl.style.height = '8rem';
    confirmAddTasksEl.style.position = 'absolute';
    confirmAddTasksEl.style.zIndex = '7';
    confirmAddTasksEl.style.top = '0';
    confirmAddTasksEl.style.left = 'calc(50% - 10rem)';
    confirmAddTasksEl.style.background = '#9b5dec';
    confirmAddTasksEl.style.color = 'white';
    confirmAddTasksEl.style.padding = '1rem';
    confirmAddTasksEl.style.textAlign = 'center';
    confirmAddTasksEl.style.borderRadius = '1rem';
    submithBtn.classList.remove('hidden');

    const innerText = `
        <p class="allertMsg">Внимание! Будут добавлены 8 пустых ячеек.</p>
        <button class="addTasksBtn cancel">Назад</button>
    `
    confirmAddTasksEl.innerHTML = innerText
    confirmAddTasksEl.append(submithBtn)
    addNewTasksContainer.appendChild(confirmAddTasksEl);

    const confirmBtn = addNewTasksContainer.querySelector(".confirm");
    const cancelBtn = addNewTasksContainer.querySelector(".cancel");
    const allBtn = addNewTasksContainer.querySelectorAll(".addTasksBtn");

    allBtn.forEach(btn => {
        btn.style.width = '6rem';
        btn.style.height = '2rem';
        btn.style.borderRadius = '1rem';
        btn.style.margin = '1rem 0 0 1.5rem';

        btn.addEventListener('mouseout', function() {
            this.style.backgroundColor = 'lightgrey'; // Неактивный станет серым
        });
    })

    confirmBtn.addEventListener('mouseenter', function() {
        this.style.backgroundColor = '#00ff00'; // При наведении станет зелёным
    });
    cancelBtn.addEventListener('mouseenter', function() {
        this.style.backgroundColor = '#e84c4c'; // При наведении станет красным
    });

    confirmBtn.addEventListener('click', () => {
        addNewTasksContainer.classList.add('hidden');
        confirmAddTasksEl.innerHTML = ''
    })
    cancelBtn.addEventListener('click', () => {
        addNewTasksContainer.append(submithBtn);
        submithBtn.classList.add("hidden");
        addNewTasksBtn.classList.remove('hidden');
        confirmAddTasksEl.remove()
    })
    
});
